<template>
  <van-dropdown-item :title="tit" ref="item" @open="open">
    <van-cell title="全选">
      <template #right-icon>
        <van-checkbox shape="square" name="all" @click="toggleAll" v-model="checkedAll"/>
      </template>
    </van-cell>
    <van-checkbox-group v-model="selectedList" ref="checkboxGroup">
      <van-cell-group>
        <van-cell center :title="item[option.label]" v-for="(item, index) in columns" :key="item[option.value]"
                  @click="toggle(index)">
          <template #right-icon>
            <van-checkbox shape="square" :name="item[option.value]" ref="checkboxes"></van-checkbox>
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <div class="search-bottom">
      <span class="btncancel" @click="cancelType">重置</span>
      <span class="btnconfirm" @click="comfirm">确定</span>
    </div>
  </van-dropdown-item>
</template>

<script>
export default {
  name: 'VanDropdownCheckbox',
  props: {
    title: {
      type: String,
      default: ''
    },
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    selectValue: {
      type: Array,
      default: function () {
        return []
      }
    },
    option: {
      type: Object,
      default: function () {
        return {label: 'text', value: 'value'}
      }
    },
  },
  computed: {},
  data() {
    return {
      checkedAll: false,
      selectedList: JSON.parse(JSON.stringify(this.selectValue)),
      tit: JSON.parse(JSON.stringify(this.title)),
    }
  },
  mounted() {
    this.setTitle()
  },
  methods: {
    open() {
      console.log(this.selectedList)
      this.$emit('open')
    },
    cancelType() {
      this.tit = JSON.parse(JSON.stringify(this.title))
      this.checkedAll = false
      this.selectedList = []
    },
    comfirm() {
      this.$refs.item.toggle()
      let resultValue = this.selectedList.join(',')
      this.setTitle()
      this.$emit('comfirm', resultValue)
    },
    toggleAll(all) {
      this.$refs.checkboxGroup.toggleAll(this.checkedAll)
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()
    },
    // 根据选择项修改标题
    setTitle() {
      if (this.selectedList.length == 1) {
        for (let i = 0; i < this.columns.length; i++) {
          const col = this.columns[i];
          if (col.value == this.selectedList.join(',')) {
            this.tit = col.text
          }
        }
      } else if (this.selectedList.length > 1) {
        this.tit = `${this.title}（${this.selectedList.length}）`
      } else if (this.selectedList.length < 1) {
        this.tit = JSON.parse(JSON.stringify(this.title))
      }
    },
    updateData(){

    },
  },
  watch: {
    selectedList: {
      handler(val) {
        this.setTitle()
        if (val.length && val.length === this.columns.length) {
          this.checkedAll = true
        } else {
          this.checkedAll = false
        }
      },
      immediate: true
    },
    selectValue: {
      handler(val) {
        this.selectedList = JSON.parse(JSON.stringify(val))
      },
      immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.search-bottom {
  height: 100px;
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px;

  .btnconfirm {
    width: 344px;
    height: 78px;
    background: #1890ff;
    border-radius: 6px;
    text-align: center;
    line-height: 78px;
    color: #fff;
  }

  .btncancel {
    width: 344px;
    height: 78px;
    background: #f6f6f6;
    border: 0.01px solid rgba(25, 31, 37, 0.12);
    border-radius: 6px;
    text-align: center;
    line-height: 78px;
  }
}

.label {
  margin-left: -6px;
  margin-top: 20px;

  span {
    height: 32px;
    background: #f0f6fe;
    color: #1890ff;
    margin-right: 20px;
    padding: 6px 16px;
    font-size: 22px;
    border-radius: 6px;
  }
}
</style>

